<template>
  <div class="addForm" v-loading="loading">
    <div class="screen">
      <div :class="screenIndex == index ? 'screen_div_hover' : 'screen_div'" v-for="(item, index) in screenList"
        :key="index" @click="navClick(item.id, index)">
        {{ item.name }}
      </div>
    </div>
    <div class="addForm_for">
      <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="120px" style="padding-bottom: 85px;"
        scroll-to-error>
        <el-row id="essential_information">
          <el-col :span="24" class="fontWeight600 mb25">
            基本信息
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplierId">
              <el-select v-model="formData.supplierId" placeholder="请选择供应商名称" clearable filterable
                v-selectLoad="selectLoad" :teleported="false" :fit-input-width="true"
                :disabled="disabledName == 'alwaysEdit' || disabledName == 'rejectStatus' || disabledName == ''"
                class="supplierSelect" remote :remote-method="searchQuery" :loading="supplierQueryLoading"
                @clear="handleClear" @change="(e: string) => { optionChange(e, 'supplierName', SupplierList) }">
                <el-option v-for="dict in SupplierList" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
                <template v-if="supplierLoading">
                  <div class="supplierSelect_icon">
                    <el-icon class="el-select-loading__icon">
                      <Loading />
                    </el-icon>
                    <span class="el-select-loading__tips">{{ "正在加载" }}</span>
                  </div>
                </template>
                <template #loading>
                  <svg class="circular" viewBox="0 0 50 50">
                    <circle class="path" cx="25" cy="25" r="20" fill="none" />
                  </svg>
                </template>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商品名称" prop="styleName">
              <el-input v-model="formData.styleName" clearable maxlength="50"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入商品名称" @input="(e: string) => { forbidRule(e, 'styleName', 'blank') }" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类目" prop="categoryId">
              <el-cascader v-model="formData.categoryId" clearable :options="categoryList"
                :disabled="disabledName == 'alwaysEdit' || disabledName == 'rejectStatus' || disabledName == ''"
                filterable :props="{ label: 'categoryName', value: 'categoryId', children: 'children' }"
                placeholder="请选择商品类目" style="width: 100%;" ref="cascaderAddr" @change="categoryIdChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品牌" prop="brandName">
              <el-input v-model="formData.brandName"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                clearable placeholder="请输入品牌" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="69码" prop="styleCode">
              <el-input v-model="formData.styleCode" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入69码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="贸易方式" prop="tradeMode">
              <el-select v-model="formData.tradeMode" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                filterable placeholder="请选择贸易方式">
                <el-option v-for="item in hm_trade_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="能否破价" prop="discountPrice">
              <el-select v-model="formData.discountPrice" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                filterable placeholder="请选择能否破价">
                <el-option v-for="item in hm_discount" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="formData.productCategoryIs">
            <el-form-item label="是否走仓" prop="warehouse">
              <el-select v-model="formData.warehouse" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                filterable placeholder="请选择是否走仓">
                <el-option v-for="item in hm_warehouse" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="对接群名" prop="groupName">
              <el-input v-model="formData.groupName" clearable :disabled="disabledName == ''" placeholder="请输入对接群名"
                maxlength="20" @input="(e: string) => { forbidRule(e, 'groupName', 'emoji') }" />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="8">
                        <el-form-item label="材质" prop="ingredient">
                            <el-input v-model="formData.ingredient" clearable :disabled="disabledName == ''"
                                placeholder="请输入材质" maxlength="50"
                                @input="(e: string) => { forbidRule(e, 'ingredient', 'emoji') }" />
                        </el-form-item>
                    </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="历史最低售价" prop="historyPrice">
              <el-input v-model="formData.historyPrice" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入历史最低售价" maxlength="20"
                @input="(e: string) => { forbidRule(e, 'historyPrice', 'emoji') }" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格/材质" prop="specs">
              <el-input v-model="formData.specs" clearable :disabled="disabledName == ''" placeholder="请输入规格/材质"
                maxlength="200" type="textarea" autosize show-word-limit class="ability_info"
                @input="(e: string) => { forbidRule(e, 'specs', 'emoji') }" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卖点" prop="sellingPoints">
              <el-input v-model="formData.sellingPoints" clearable :disabled="disabledName == ''" placeholder="请输入卖点"
                maxlength="189" type="textarea" autosize show-word-limit class="ability_info"
                @input="(e: string) => { forbidRule(e, 'sellingPoints', 'emoji') }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品图片" prop="productImage">
              <ImageUploadDrags v-model="formData.productImage" :limit="5" :format="true"
                :isType="disabledName !== ''" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row id="cooperation_information">
          <el-col :span="24" class="fontWeight600 mb25">
            合作信息
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="taxClassName">
              <el-form-item label="平台扣点" prop="tax" class="taxClassName_flex" style="flex: 1;">
                <el-input v-model="formData.tax" clearable placeholder="请输入平台扣点"
                  :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
              <img src="@/assets/images/depot/icon_kongxinwenhao.png" alt="" class="taxClassName_img"
                @click="isTaxRule = true">
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="fontWeight600 mb25">
            机制1：
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="合作方式" prop="cooperationMode">
              <el-select v-model="formData.cooperationMode" clearable filterable
                :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请选择合作方式" @change="mechanismChange('1')">
                <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售价" :prop="formData.cooperationMode === '供货' ? '' : 'price'">
              <el-input v-model="formData.price" clearable placeholder="请输入售价"
                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="佣金" :prop="formData.cooperationMode === '供货' ? '' : 'commission'">
              <el-input v-model="formData.commission" clearable
                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入佣金">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="直播机制" prop="liveStreamingMechanism">
              <el-input v-model="formData.liveStreamingMechanism" clearable placeholder="请输入直播机制" maxlength="12"
                :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism', 'blank') }" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="补充佣金" prop="brokerage">
              <el-input v-model="formData.brokerage" clearable
                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入补充佣金">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价" prop="costPrice">
              <el-input v-model="formData.costPrice" clearable
                :disabled="formData.cooperationMode === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入成本价" />
            </el-form-item>
          </el-col>
        </el-row>

        <div v-if="mechanismArr.indexOf(2) !== -1" style="position: relative;">
          <div class="delete_mechanism"
            v-if="disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add'">
            <el-image class="delete" :src="icon_shanchu" @click="handleDelete(2)"></el-image>
          </div>
          <el-row>
            <el-col :span="24" class="fontWeight600 mb25">
              机制2：
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合作方式" prop="cooperationMode2">
                <el-select v-model="formData.cooperationMode2" clearable
                  :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                  filterable placeholder="请选择合作方式" @change="mechanismChange('2')">
                  <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="售价" :prop="formData.cooperationMode2 !== '供货' ? 'price2' : ''">
                <el-input v-model="formData.price2" clearable
                  :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                  placeholder="请输入售价" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="佣金" :prop="formData.cooperationMode2 !== '供货' ? 'commission2' : ''">
                <el-input v-model="formData.commission2" clearable placeholder="请输入佣金"
                  :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="直播机制" prop="liveStreamingMechanism2">
                <el-input v-model="formData.liveStreamingMechanism2" clearable placeholder="请输入直播机制" maxlength="12"
                  @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism2', 'blank') }"
                  :disabled="!formData.cooperationMode2 || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="补充佣金" prop="brokerage2">
                <el-input v-model="formData.brokerage2" clearable placeholder="请输入补充佣金"
                  :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="成本价" prop="costPrice2">
                <el-input v-model="formData.costPrice2" clearable placeholder="请输入成本价"
                  :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="mechanismArr.indexOf(3) !== -1" style="position: relative;">
          <div class="delete_mechanism"
            v-if="disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add'">
            <el-image class="delete" :src="icon_shanchu" @click="handleDelete(3)"></el-image>
          </div>
          <el-row>
            <el-col :span="24" class="fontWeight600 mb25">
              机制3：
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合作方式" prop="cooperationMode3">
                <el-select v-model="formData.cooperationMode3" clearable
                  :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                  filterable placeholder="请选择合作方式" @change="mechanismChange('3')">
                  <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="售价" :prop="formData.cooperationMode3 !== '供货' ? 'price3' : ''">
                <el-input v-model="formData.price3" clearable placeholder="请输入售价"
                  :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="佣金" :prop="formData.cooperationMode3 !== '供货' ? 'commission3' : ''">
                <el-input v-model="formData.commission3" clearable placeholder="请输入佣金"
                  :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="直播机制" prop="liveStreamingMechanism3">
                <el-input v-model="formData.liveStreamingMechanism3" clearable placeholder="请输入直播机制" maxlength="12"
                  @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism3', 'blank') }"
                  :disabled="!formData.cooperationMode3 || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="补充佣金" prop="brokerage3">
                <el-input v-model="formData.brokerage3" clearable placeholder="请输入补充佣金"
                  :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="成本价" prop="costPrice3">
                <el-input v-model="formData.costPrice3" clearable placeholder="请输入成本价"
                  :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="add_mechanism_div"
          v-if="mechanismArr.length < 3 && (disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add')">
          <el-button type="primary" :icon="Plus" @click="addMechanism(mechanismArr.length + 1)"
            class="add_mechanism">补充机制</el-button>
        </div>
        <div v-if="isDisabled">
          <el-row>
            <el-col :span="24" class="fontWeight600 mb25" id='merchant_information'>
              商家信息
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="商家类型">
                <el-input v-model="formData.supplierType" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商联系人">
                <el-input v-model="formData.contactName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商联系电话">
                <el-input v-model="formData.phone" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="厂家地址">
                <el-input v-model="formData.addr" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="厂家详细地址">
                <el-input v-model="formData.address" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="24" class="fontWeight600 mb25" id='live_supplementary_information'>
            直播补充信息
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发货时间" prop="deliveryTime">
              <el-input v-model="formData.deliveryTime" clearable placeholder="请输入发货时间" maxlength="48"
                @input="(e: string) => { forbidRule(e, 'deliveryTime', 'emoji') }"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货地" prop="placeDelivery">
              <!-- <el-cascader v-model="formData.placeDelivery" clearable
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                :options="options" :props="{
                                    label: 'value',
                                    value: 'value'
                                }" style="width: 100%;" filterable @change="placeDeliveryChange" /> -->
              <el-input v-model="formData.placeDelivery" clearable placeholder="请输入发货地" maxlength="100"
                @input="(e: string) => { forbidRule(e, 'placeDelivery', 'emoji') }"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流/快递" prop="logistics">
              <el-input v-model="formData.logistics" clearable maxlength="20"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入物流/快递" @input="(e: string) => { forbidRule(e, 'logistics', 'blank') }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="适用人群" prop="eligibility">
              <el-input v-model="formData.eligibility" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入适用人群" maxlength="20"
                @input="(e: string) => { forbidRule(e, 'eligibility', 'emoji') }" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂家可用库存" prop="factoryStockNum">
              <el-input v-model="formData.factoryStockNum" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入厂家可用库存" maxlength="8" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不发货地区" prop="noSendArea">
              <el-input v-model="formData.noSendArea" clearable
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                placeholder="请输入不发货地区" maxlength="72"
                @input="(e: string) => { forbidRule(e, 'noSendArea', 'emoji') }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="包销提醒" prop="isPackageRemind">
              <el-switch v-model="formData.isPackageRemind" :active-value="1" :disabled="disabledName == ''"
                :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包销时限" prop="packageDeadline">
              <el-select v-model="formData.packageDeadline" clearable :disabled="disabledName == ''" filterable
                placeholder="请选择包销时限">
                <el-option v-for="item in underwritingTimesColumns" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="大货时间" prop="bigDate">
              <el-date-picker value-format="YYYY-MM-DD" v-model="formData.bigDate" type="date" placeholder="请选择大货时间"
                clearable style="width: 100%" :disabled-date="disabledDate"
                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="无AB货截图" prop="noAbImage">
              <ImageUploadDrags v-model="formData.noAbImage" :limit="1" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="大货视频" prop="bigVideo">
              <ImageUploadDrags v-model="formData.bigVideo" :limit="1" :format="true" :fileType="['mp4', 'wmv', 'flv']"
                :fileSize="200" :isType="disabledName !== ''" :isImage="false" :isBigVideo="false" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.auditStatus !== '-1' && formData.auditStatus !== '-2' && disabledName !== 'add'">
          <el-col :span="12" class="flex_div">
            <div class="label">
              <img src="@/assets/images/pdf.png" alt="">【{{ formData.styleName }}】信息卡 (A4) PDF
            </div>
            <div class="value">
              <span @click="preview(formData.id)">预览</span>
              <span @click="handleExport(formData.id)">下载</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="fontWeight600 mb25" id="product_specifications">
            商品资质
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备案凭证/行政许可批件" prop="voucherImage" label-width="220px">
              <ImageUploadDrags v-model="formData.voucherImage" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="其他资质" prop="otherImage" label-width="220px">
              <ImageUploadDrags v-model="formData.otherImage" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.tradeMode == '进口'">
          <el-col :span="24">
            <el-form-item label="进口货物/原材料报关单" prop="customsDeclarationImage" label-width="220px">
              <ImageUploadDrags v-model="formData.customsDeclarationImage" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.tradeMode == '进口'">
          <el-col :span="24">
            <el-form-item label="进口产品备案材料" prop="customsInformationImage" label-width="220px">
              <ImageUploadDrags v-model="formData.customsInformationImage" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.tradeMode == '进口'">
          <el-col :span="24">
            <el-form-item label="进口产品原材料检验检疫证明" prop="customsInspectionImage" label-width="220px">
              <ImageUploadDrags v-model="formData.customsInspectionImage" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.tradeMode == '进口'">
          <el-col :span="24">
            <el-form-item label="检测报告" prop="customsTestReportImgae" label-width="220px">
              <ImageUploadDrags v-model="formData.customsTestReportImgae" :limit="5" :format="true"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btn_tow_box"
          style="position: absolute;bottom: 0;left: 0;background-color: #fff;width: 100%;padding: 20px;">
          <el-row v-if="title !== '查看详情'">
            <el-col :span="24">
              <el-form-item>
                <el-button :loading="loading" type="primary" @click="submitForm(formDataRef)">提交</el-button>
                <el-button @click="resetForm(formDataRef)">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <Point v-if="isTaxRule" @close="isTaxRule = false" />
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
const { proxy } = getCurrentInstance() as any;
import { Plus } from '@element-plus/icons-vue';
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const { hm_discount } = toRefs<any>(proxy?.useDict('hm_discount'));
const { hm_express } = toRefs<any>(proxy?.useDict('hm_express'));
import jsonData from './compoments/address.json';
import icon_shanchu from '@/assets/images/icon_shanchu.png';
import { listHmContract } from '@/api/system/hmContract';
import { loginSupplierByRoleList } from '@/api/group/supplier/index';
import { getCategoryLists } from '@/api/group/productOutbound/index';
import { addProduct, editByInvent } from '@/api/system/supplierAddProducts/index';
import { getInfoInvent } from '@/api/system/supplierAddProducts/index';
import { exportCertId } from '@/api/group/investmentPromotion/index';
import Point from './compoments/point.vue';
const props = defineProps(['title', 'AddFormId', 'disabledName']);
const emit = defineEmits(['onSubmit']);
const options = jsonData;
const screenIndex = ref(0);
const loading = ref(false);
const isTaxRule = ref(false);
const formDataRef = ref();
const cascaderAddr = ref();
const mechanismArr = ref([1]);
const isDisabled = ref(false);
const screenList = ref([
  { name: '基本信息', id: '#essential_information' },
  { name: '合作信息', id: '#cooperation_information' },
  { name: '商家信息', id: '#merchant_information' },
  { name: '直播补充信息', id: '#live_supplementary_information' },
  { name: '商品资质', id: '#product_specifications' }
]);
const underwritingTimesColumns = ref([
  { label: '3个月', value: '3个月' },
  { label: '6个月', value: '6个月' },
  { label: '12个月', value: '12个月' },
  { label: '永久', value: '永久' }
]);
const formData = ref<any>({
  supplierName: '',
  supplierId: '',
  styleName: '',
  productCategoryName: '',
  productCategoryIs: false,
  categoryId: '',
  brandName: '',
  styleCode: '',
  tradeMode: '',
  discountPrice: '',
  specs: '',
  ingredient: '',
  warehouse: '',
  isPackageRemind: 0,
  groupName: '',
  sellingPoints: '',
  productImage: '',
  tax: '',
  packageDeadline: '',
  bigDate: '',

  cooperationMode: '',
  price: '',
  costPrice: '',
  liveStreamingMechanism: '',
  commission: '',
  brokerage: '',

  cooperationMode2: '',
  price2: '',
  costPrice2: '',
  liveStreamingMechanism2: '',
  commission2: '',
  brokerage2: '',

  cooperationMode3: '',
  price3: '',
  costPrice3: '',
  liveStreamingMechanism3: '',
  commission3: '',
  brokerage3: '',

  deliveryTime: '',
  placeDelivery: '',
  placeDeliveryId: '',
  logistics: '',
  eligibility: '',
  factoryStockNum: '',
  noSendArea: '',
  voucherImage: '',
  otherImage: '',
  customsDeclarationImage: '',
  customsInformationImage: '',
  customsInspectionImage: '',
  customsTestReportImgae: '',
  noAbImage: '',
  bigVideo: ''
});
//走仓列表数据
const hm_warehouse = ref([
  {
    value: 1,
    label: '是'
  },
  {
    value: 0,
    label: '否'
  }
]);
// 品牌效验
const validatorNumberBrand = (ruls: any, val: string) => {
  if (val) {
    return /^[\u0020-\u007e\u4e00-\u9fa5]+$/.test(val);
  } else {
    return true;
  }
};
// 69码效验
const validatorStyleCode = (ruls: any, val: string) => {
  if (val) {
    return /^[0-9]{3,13}$/.test(val);
  } else {
    return true;
  }
};
// 售价效验
const validatorNumber = (ruls: any, val: string) => {
  return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
};
// 平台扣点效验，佣金校验
const validatorcommission = (ruls: any, val: string) => /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
// 成本效验
const validatorNumbercostPrice = (ruls: any, val: string) => {
  if (formData.value.cooperationMode == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true;
    }
  } else if (formData.value.cooperationMode == '') {
    return true;
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
};
const validatorNumbercostPrice2 = (ruls: any, val: string) => {
  if (formData.value.cooperationMode2 == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true;
    }
  } else if (formData.value.cooperationMode2 == '') {
    return true;
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
};
const validatorNumbercostPrice3 = (ruls: any, val: string) => {
  if (formData.value.cooperationMode3 == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true;
    }
  } else if (formData.value.cooperationMode3 == '') {
    return true;
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
};
// 补充佣金校验
const validatorbrokerage = (ruls: any, val: string) => {
  if (val) {
    return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
  } else {
    return true;
  }
};
// 历史最低售价
const validatorPrice = (ruls: any, val: string) => {
  if (val) {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  } else {
    return true;
  }
};
// 正整数验证
const positiveInteger = (ruls: any, val: string) => {
  if (val) {
    return /^[1-9]\d*$/.test(val);
  } else {
    return true;
  }
};

const rules = ref({
  supplierId: [{ required: true, message: '请选择供应商名称', trigger: 'change' }],
  styleName: [{ required: true, message: '请输入商品名称', trigger: 'change' }],
  categoryId: [{ required: true, message: '请选择商品类目', trigger: 'change' }],
  brandName: [{ validator: validatorNumberBrand, message: '请输入正确的品牌名称', trigger: 'change' }],
  styleCode: [{ validator: validatorStyleCode, message: '请输入正确内容', trigger: 'change' }],
  discountPrice: [{ required: true, message: '请选择能否破价', trigger: 'change' }],
  // groupName: [{ required: true, message: '请输入对接群名', trigger: 'change' }],
  historyPrice: [
    { required: false, message: '请输入历史最低售价', trigger: 'change' },
    { validator: validatorPrice, message: '请输入正确的历史最低售价' }
  ],
  sellingPoints: [{ required: true, message: '请输入卖点', trigger: 'change' }],
  tax: [
    { required: true, message: '请输入平台扣点', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  cooperationMode: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  price: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  costPrice: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  liveStreamingMechanism: [{ required: true, message: '请输入直播机制', trigger: 'change' }],
  commission: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  brokerage: [{ validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }],

  cooperationMode2: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  price2: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  costPrice2: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice2, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  liveStreamingMechanism2: [{ required: true, message: '请输入直播机制', trigger: 'change' }],
  commission2: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  brokerage2: [{ validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }],

  cooperationMode3: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  price3: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  costPrice3: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice3, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  liveStreamingMechanism3: [{ required: true, message: '请输入直播机制', trigger: 'change' }],
  commission3: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }
  ],
  brokerage3: [{ validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' }],
  factoryStockNum: [
    { required: true, message: '请输入厂家可用库存', trigger: 'change' },
    { validator: positiveInteger, message: '请输入正确的正整数', trigger: 'change' }
  ],
  bigDate: [{ required: true, message: '请选择大货时间', trigger: 'change' }],
  noAbImage: [{ required: true, message: '请上传无AB货截图', trigger: 'change' }],
  specs: [{ required: true, message: '请输入规格/材质', trigger: 'change' }],
  warehouse: [{ required: true, message: '请选择是否走仓', trigger: 'change' }],
  deliveryTime: [{ required: true, message: '请输入发货时间', trigger: 'change' }]
});

// 供应商下拉列表
const SupplierList = ref<Array<any>>([]);
// 类目列表
const categoryList = ref<Array<any>>([]);

const supplierLoading = ref(true);
const supplierNameDate = ref({
  pageNum: 1,
  pageSize: 10,
  supplierName: ''
});
const supplierQueryLoading = ref(false);
const supplierNametotal = ref();
/** 禁用 */
const disabledDate = (time: any) => {
  return time.getTime() < Date.now() - 8.64e7; // 8.64e7 毫秒数代表一天
};
// 提交
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      const params = { ...formData.value };
      const hmMechanismsList = [
        {
          cooperationMode: params.cooperationMode,
          price: params.price,
          costPrice: params.costPrice,
          liveStreamingMechanism: params.liveStreamingMechanism,
          commission: params.commission,
          brokerage: params.brokerage
        },
        {
          cooperationMode: params.cooperationMode2,
          price: params.price2,
          costPrice: params.costPrice2,
          liveStreamingMechanism: params.liveStreamingMechanism2,
          commission: params.commission2,
          brokerage: params.brokerage2
        },
        {
          cooperationMode: params.cooperationMode3,
          price: params.price3,
          costPrice: params.costPrice3,
          liveStreamingMechanism: params.liveStreamingMechanism3,
          commission: params.commission3,
          brokerage: params.brokerage3
        }
      ];
      params.categoryId = params.categoryId.join(',');
      // params.placeDelivery = params.placeDelivery && params.placeDelivery.join('-')
      params.placeDeliveryId = params.placeDelivery;
      params.hmMechanismsList = hmMechanismsList;
      try {
        if (props.title === '编辑商品') {
          // 修改商品调用
          const res = await editByInvent(params);
          ElMessage({
            message: '商品修改成功',
            type: 'success'
          });
          loading.value = false;
        } else {
          // 添加商品调用
          const res = await addProduct(params);
          ElMessage({
            message: '商品添加成功',
            type: 'success'
          });
          loading.value = false;
        }
        emit('onSubmit');
      } catch (error) {
        loading.value = false;
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 重置
const resetForm = (formEl: any) => {
  if (!formEl) return;
  formData.value = {
    supplierName: '',
    supplierId: '',
    styleName: '',
    productCategoryName: '',
    productCategoryIs: false,
    categoryId: '',
    brandName: '',
    styleCode: '',
    tradeMode: '',
    discountPrice: '',
    specs: '',
    ingredient: '',
    warehouse: '',
    isPackageRemind: false,
    packageDeadline: '',
    bigDate: '',
    groupName: '',
    sellingPoints: '',
    productImage: '',
    tax: '',

    cooperationMode: '',
    price: '',
    costPrice: '',
    liveStreamingMechanism: '',
    commission: '',
    brokerage: '',

    cooperationMode2: '',
    price2: '',
    costPrice2: '',
    liveStreamingMechanism2: '',
    commission2: '',
    brokerage2: '',

    cooperationMode3: '',
    price3: '',
    costPrice3: '',
    liveStreamingMechanism3: '',
    commission3: '',
    brokerage3: '',

    deliveryTime: '',
    placeDelivery: '',
    placeDeliveryId: '',
    logistics: '',
    eligibility: '',
    factoryStockNum: '',
    noSendArea: '',
    voucherImage: '',
    otherImage: '',
    customsDeclarationImage: '',
    customsInformationImage: '',
    customsInspectionImage: '',
    customsTestReportImgae: '',
    noAbImage: '',
    bigVideo: ''
  };
  emit('onSubmit');
};
// select选择处理
const optionChange = (e: string, key: string, arr: Array<any>) => {
  const data = arr.find((item) => {
    return item.id === e;
  });
  if (data) {
    formData.value[key] = data[key];
  }
};
// 输入事件、禁用规则
const forbidRule = (e: string, key: string, type: string) => {
  // 输入法表情默认不能输入
  if (type == 'emoji') {
    // emoji：输入时禁用输入法表情
    formData.value[key] = e.replace(
      /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi,
      ''
    );
  } else if (type == 'blank') {
    // blank：输入时禁用空格
    formData.value[key] = e.replace(
      /\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi,
      ''
    );
  }
};
// 机制选择合作方式清楚其余数据
const mechanismChange = (key: string) => {
  if (key === '1') {
    formData.value.price = '';
    formData.value.costPrice = '';
    formData.value.liveStreamingMechanism = '';
    formData.value.commission = '';
    formData.value.brokerage = '';
    formDataRef.value.clearValidate('price');
    formDataRef.value.clearValidate('costPrice');
    formDataRef.value.clearValidate('liveStreamingMechanism');
    formDataRef.value.clearValidate('commission');
    formDataRef.value.clearValidate('brokerage');
  }
  if (key === '2') {
    formData.value.price2 = '';
    formData.value.costPrice2 = '';
    formData.value.liveStreamingMechanism2 = '';
    formData.value.commission2 = '';
    formData.value.brokerage2 = '';
    formDataRef.value.clearValidate('price2');
    formDataRef.value.clearValidate('costPrice2');
    formDataRef.value.clearValidate('liveStreamingMechanism2');
    formDataRef.value.clearValidate('commission2');
    formDataRef.value.clearValidate('brokerage2');
  }
  if (key === '3') {
    formData.value.price3 = '';
    formData.value.costPrice3 = '';
    formData.value.liveStreamingMechanism3 = '';
    formData.value.commission3 = '';
    formData.value.brokerage3 = '';
    formDataRef.value.clearValidate('price3');
    formDataRef.value.clearValidate('costPrice3');
    formDataRef.value.clearValidate('liveStreamingMechanism3');
    formDataRef.value.clearValidate('commission3');
    formDataRef.value.clearValidate('brokerage3');
  }
};
// 处理商品类目名称
const categoryIdChange = (value: any) => {
  if (value && value.length) {
    formData.value.productCategoryName = cascaderAddr.value.getCheckedNodes()[0].pathLabels.join(',');
    let name = cascaderAddr.value.getCheckedNodes()[0].pathLabels.join(',');
    if (name.indexOf('饰品') < 0) {
      formData.value.productCategoryIs = false;
      formData.value.warehouse = '';
    } else {
      formData.value.productCategoryIs = true;
    }
  } else {
    formData.value.productCategoryName = '';
    formData.value.productCategoryIs = false;
    formData.value.warehouse = '';
  }
};
/** 补充机制 */
const addMechanism = (index: number) => {
  mechanismArr.value.push(index);
};
onMounted(() => {
  GetCategoryLists();

  if (props.title === '查看详情') {
    isDisabled.value = true;
  } else {
    screenList.value = [
      { name: '基本信息', id: '#essential_information' },
      { name: '合作信息', id: '#cooperation_information' },
      { name: '直播补充信息', id: '#live_supplementary_information' },
      { name: '商品资质', id: '#product_specifications' }
    ];
  }
  if (props.title === '查看详情' || props.title === '编辑商品') {
    getLook();
  }
});
// 获取供应商列表
const getListHmContract = async () => {
  supplierLoading.value = true;
  const res = await loginSupplierByRoleList(supplierNameDate.value);
  const reshandle = res.rows.map((item: any) => ({
    label: item.supplierName,
    value: item.id
  }));
  SupplierList.value.push(...reshandle);
  supplierNametotal.value = res.total;
  supplierLoading.value = false;
};
/** select懒加载 */
const selectLoad = async () => {
  if (SupplierList.value.length < supplierNametotal.value) {
    supplierNameDate.value.pageNum++;
    getListHmContract();
  }
};
/** 远程搜索 */
const searchQuery = async (query: string) => {
  supplierQueryLoading.value = true;
  SupplierList.value = [];
  supplierNameDate.value.pageNum = 1;
  supplierNameDate.value.pageSize = 10;
  supplierNameDate.value.supplierName = query;
  await getListHmContract();
  supplierQueryLoading.value = false;
};
/** 清空供应商 */
const handleClear = () => {
  supplierNameDate.value.supplierName = '';
  SupplierList.value = [];
  supplierNameDate.value.pageNum = 1;
  supplierNameDate.value.pageSize = 10;
  getListHmContract();
};
// 获取所有类目
const GetCategoryLists = async () => {
  const { data = [] } = await getCategoryLists();
  categoryList.value = data;
};
watchEffect(() => {
  // 监听平台扣点，售价，佣金，补充佣金，动态计算成本
  if (formData.value.cooperationMode === '分佣') {
    let costPrice =
      Number(formData.value.price || 0) *
      (1 - (Number(formData.value.commission || 0) / 100 + Number(formData.value.brokerage || 0) / 100 + Number(formData.value.tax || 0) / 100));
    formData.value.costPrice = isNaN(costPrice) ? 0 : costPrice.toFixed(2);
  }
  if (formData.value.cooperationMode2 === '分佣') {
    let costPrice2 =
      Number(formData.value.price2 || 0) *
      (1 - (Number(formData.value.commission2 || 0) / 100 + Number(formData.value.brokerage2 || 0) / 100 + Number(formData.value.tax || 0) / 100));
    formData.value.costPrice2 = isNaN(costPrice2) ? 0 : costPrice2.toFixed(2);
  }
  if (formData.value.cooperationMode3 === '分佣') {
    let costPrice3 =
      Number(formData.value.price3 || 0) *
      (1 - (Number(formData.value.commission3 || 0) / 100 + Number(formData.value.brokerage3 || 0) / 100 + Number(formData.value.tax || 0) / 100));
    formData.value.costPrice3 = isNaN(costPrice3) ? 0 : costPrice3.toFixed(2);
  }
});
// 查看详情与修改商品时调用详情接口进行数据反显
const getLook = async () => {
  loading.value = true;
  const res = await getInfoInvent({ id: props.AddFormId });
  let params = JSON.parse(JSON.stringify(res.data));
  params.categoryId = params.categoryId?.split(',');
  params.placeDeliveryId = params.placeDeliveryId?.split(',');
  params.hmMechanismsList.forEach((item: any, index: number) => {
    if (index === 0) {
      params.cooperationMode = item.cooperationMode;
      params.price = item.price;
      params.costPrice = item.costPrice;
      params.liveStreamingMechanism = item.liveStreamingMechanism;
      params.commission = item.commission;
      params.brokerage = item.brokerage;
    }
    if (index === 1 && item.cooperationMode) {
      params.cooperationMode2 = item.cooperationMode;
      params.price2 = item.price;
      params.costPrice2 = item.costPrice;
      params.liveStreamingMechanism2 = item.liveStreamingMechanism;
      params.commission2 = item.commission;
      params.brokerage2 = item.brokerage;
      mechanismArr.value.push(2);
    }
    if (index === 2 && item.cooperationMode) {
      params.cooperationMode3 = item.cooperationMode;
      params.price3 = item.price;
      params.costPrice3 = item.costPrice;
      params.liveStreamingMechanism3 = item.liveStreamingMechanism;
      params.commission3 = item.commission;
      params.brokerage3 = item.brokerage;
      mechanismArr.value.push(3);
    }
  });
  // params.placeDelivery = params.placeDelivery ? (params.placeDelivery as string).split('-') : []
  params.productCategoryIs = params?.productCategoryName?.indexOf('饰品') < 0 ? false : true;
  formData.value = params;
  loading.value = false;

  SupplierList.value = [
    {
      label: formData.value.supplierName,
      value: formData.value.supplierId
    }
  ];
};
/** 删除机制 */
const handleDelete = (index: number) => {
  // 当机制二删除并且机制三也存在得情况 删除机制三 保留机制二
  if (index == 2 && mechanismArr.value.length == 3) {
    mechanismArr.value.splice(2, 1);
    formData.value.cooperationMode2 = formData.value.cooperationMode3;
    formData.value.price2 = formData.value.price3;
    formData.value.costPrice2 = formData.value.costPrice3;
    formData.value.liveStreamingMechanism2 = formData.value.liveStreamingMechanism3;
    formData.value.commission2 = formData.value.commission3;
    formData.value.brokerage2 = formData.value.brokerage3;

    formData.value.cooperationMode3 = '';
    formData.value.price3 = '';
    formData.value.costPrice3 = '';
    formData.value.liveStreamingMechanism3 = '';
    formData.value.commission3 = '';
    formData.value.brokerage3 = '';
  } else {
    let indexs = mechanismArr.value.indexOf(index);
    mechanismArr.value.splice(indexs, 1);
    if (index == 2) {
      formData.value.cooperationMode2 = '';
      formData.value.price2 = '';
      formData.value.costPrice2 = '';
      formData.value.liveStreamingMechanism2 = '';
      formData.value.commission2 = '';
      formData.value.brokerage2 = '';
    } else if (index == 3) {
      formData.value.cooperationMode3 = '';
      formData.value.price3 = '';
      formData.value.costPrice3 = '';
      formData.value.liveStreamingMechanism3 = '';
      formData.value.commission3 = '';
      formData.value.brokerage3 = '';
    }
  }
};
// 锚点
const navClick = (id: string, index: number) => {
  const info: any = document.querySelector(id);
  info.scrollIntoView({ behavior: 'smooth' });
  screenIndex.value = index;
};
/** 预览 */
const preview = async (id: string) => {
  const resp: any = await exportCertId(id);
  const blob = window.URL.createObjectURL(new Blob([resp], { type: 'application/pdf' }));
  window.open(blob);
};
/** 下载 */
const handleExport = async (id: string) => {
  const resp: any = await exportCertId(id);

  // 创建一个Blob对象，并传入响应数据
  const blob = new Blob([resp], { type: 'application/pdf' });

  // 创建一个指向该Blob对象的URL
  const url = window.URL.createObjectURL(blob);

  // 创建一个下载链接，并模拟点击它
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', `${formData.value.styleName}信息卡`); // 设置下载的文件名
  document.body.appendChild(link);
  link.click();

  // 从DOM中移除链接，并释放URL对象
  link.remove();
  window.URL.revokeObjectURL(url);
};
const placeDeliveryChange = (val: any) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.supplierSelect_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.el-select-loading__tips {
  color: #606266;
  font-size: 14px;
}

.addForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;

  .screen {
    display: flex;
    align-items: center;
    cursor: pointer;

    .screen_div {
      width: 106px;
      height: 44px;
      background: #ebf7ff;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      font-size: 14px;
      color: #0094ff;
    }

    .screen_div_hover {
      width: 106px;
      height: 44px;
      background: #0094ff;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 44px;
    }
  }

  .addForm_for {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    .taxClassName {
      display: flex;

      .taxClassName_flex {
        flex: 1;
      }

      .taxClassName_img {
        margin-left: 15px;
        margin-top: 7px;
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
    }
  }
}

.fontWeight600 {
  font-weight: 600;
  font-size: 16px;
  color: var(--bTextColor);
}

.mb25 {
  margin-bottom: 25px;
}

.add_mechanism_div {
  width: 100%;
  display: flex;
  justify-content: center;

  .add_mechanism {
    width: 275px;
    height: 38px;
    font-size: 16px;
  }
}

.delete_mechanism {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 0;
  cursor: pointer;
  z-index: 50;
}

.flex_div {
  display: flex;
  margin-left: 50px;

  .label {
    min-width: 120px;
    font-size: 14px;
    background-color: rgba(240, 246, 255);
    padding: 4px 7px;

    img {
      width: 14px;
      height: 14px;
    }

    margin-right: 10px;
  }

  .value {
    color: #0094ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    cursor: pointer;

    span {
      margin-right: 30px;
    }
  }
}
</style>